<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- three.js library -->
<script src='bulid/three.js'></script>
<script src="bulid/stats.js"></script>
<!-- ar.js -->
<script src="bulid/ar.js"></script>
<script src="bulid/MTLLoader.js"></script>
<script src="bulid/OBJLoader.js"></script>
<script src="bulid/FBXLoader.js"></script>
<script src="bulid/inflate.min.js"></script>


<body style='margin : 0; overflow: hidden; '>
	<div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
		 
		<div id="Stats-output">
		</div>
		<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js camera transform
		<br />
		Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
	</div>
	<script>
		var obj;
		const clock = new THREE.Clock();
		let mixer;
		//fps监测
		var stats = initStats();

		//fps状态
		function initStats() {
			var stats = new Stats();
			stats.setMode(0); // 0: fps, 1: ms

			// Align top-left
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.left = '0px';
			stats.domElement.style.top = '0px';

			document.getElementById("Stats-output").appendChild(stats.domElement);
			return stats;
		}

		// 初始化渲染器
		var renderer = new THREE.WebGLRenderer({
			antialias: true, //开启抗锯齿
			alpha: true //开启背景透明
		});
		renderer.setClearColor(new THREE.Color('lightgrey'), 0);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.domElement.style.position = 'absolute';
		renderer.domElement.style.top = '0px';
		renderer.domElement.style.left = '0px';
		document.body.appendChild(renderer.domElement);

		// a渲染循环的函数数组 呈现循环的函数数组
		var onRenderFcts = [];


		// 初始化摄像机位置(0，0，0)
		// camera = new THREE.Camera();
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
		camera.position.set(0, 500, 100);

		var scene = new THREE.Scene();

		scene.add(camera);

		// 初始化灯光
		var light = new THREE.DirectionalLight(0xffffff, 1.0);
		light.position.set(0, 30, 40);
		light.castShadow = true; // 启用阴影选项
		scene.add(light);
		//环境光设置
		var ambilight = new THREE.AmbientLight(0xffffff, 0.2);
		scene.add(ambilight);


		// ar工具包来源
		var arToolkitSource = new THREEx.ArToolkitSource({})
		arToolkitSource.init(function onReady() {
			onResize()
		})

		// 手柄调整大小
		window.addEventListener('resize', function() {
			onResize()
		})

		function onResize() {
			arToolkitSource.onResize()
			arToolkitSource.copySizeTo(renderer.domElement)
			if (arToolkitContext.arController !== null) {
				arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
			}
		}


		// 在工具箱上下文中创建
		var arToolkitContext = new THREEx.ArToolkitContext({
			cameraParametersUrl: 'data/camera_para.dat',
			detectionMode: 'mono',
		})

		// 初始化它
		arToolkitContext.init(function onCompleted() {
			// 将投影矩阵复制到相机
			camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
		})

		// 在每帧上更新artoolkit
		onRenderFcts.push(function() {
			if (arToolkitSource.ready === false) return
			arToolkitContext.update(arToolkitSource.domElement)
			// 如果看到标记，则更新scene.visible
			scene.visible = camera.visible
		})
		// init controls for camera
		var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
			type: 'pattern',
			// patternUrl: 'arcode/marker89.
			// 当我们控制相机时，设置changeMatrixMode：“cameraTransformMatrix”td',
			patternUrl: 'data/pattern-marker.patt',
			// patternUrl: 'data/pattern-33.patt',
			changeMatrixMode: 'cameraTransformMatrix'
		})
		scene.visible = false;
		onRenderFcts.push(function(delta) {
			//            if(obj)
			//			{
			//			    obj.rotation.y=+1;
			//			}
		});


		//在页面上呈现整个内容

		// render the scene
		onRenderFcts.push(function() {
			renderer.render(scene, camera);
		});

		// 运行渲染循环
		var lastTimeMsec = null
		requestAnimationFrame(function animate(nowMsec) {
			// keep looping
			requestAnimationFrame(animate);
			const delta = clock.getDelta();
			if (mixer) mixer.update(delta);
			stats.update();
			// measure time
			lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60
			var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
			lastTimeMsec = nowMsec
			// call each update function
			onRenderFcts.forEach(
				function(onRenderFct) {
					onRenderFct(deltaMsec / 1000, nowMsec / 1000)
				})
		})



		var onProgress = function(xhr) {
			if (xhr.lengthComputable) {
				var percentComplete = xhr.loaded / xhr.total * 100;
				console.log(Math.round(percentComplete, 2) + '% 加载OBJ文件');
				document.write(" \n加载模型进度条", Math.round(percentComplete, 2) + '% 加载文件\n' + "---------------------")
			}
		};

		var onError = function(xhr) {
			console.log("加载出错?", xhr)
			document.write(" \n加载模型出错.." + "---------------------")
		};

		var mtlLoader = new THREE.MTLLoader();
		mtlLoader.setPath('obj/');
		mtlLoader.load('jj.mtl', function (materials) {
		    materials.preload();
		    var objLoader = new THREE.OBJLoader();
		    objLoader.setMaterials(materials);
		    objLoader.setPath('obj/');
		    objLoader.load('jj.obj', function (object) {
		        obj = object;
		        scene.add(object);
		        object.position.set(0, 0, 0);
		        object.scale.set(0.0001, 0.0001, 0.0001);
		        var axes = new THREE.AxisHelper(1);
		        scene.add(axes);
		        console.log("加载obj")
                document.write(" \n OBJ初始化完成" + "---------------------")
		    }, onProgress, onError);
		});

		// const loader = new THREE.FBXLoader();
		// loader.load('obj/cc.fbx', function(object) {
		// 	console.log("加载FBX")
		// 	document.write("\n 开始加载FBX.." + "---------------------")
		// 	mixer = new THREE.AnimationMixer(object);
		// 	const action = mixer.clipAction(object.animations[0]);
		// 	action.play();
		// 	object.traverse(function(child) {
		// 		if (child.isMesh) {
		// 			child.castShadow = true;
		// 			child.receiveShadow = true;

		// 		}
		// 	});
		// 	var axes = new THREE.AxisHelper(1);
		// 	scene.add(axes);
		// 	console.log("加载FBX")
		// 	document.write("\n 加载FBX完成" + "---------------------")

		// 	scene.add(object);
		// 	object.scale.set(0.005, 0.005, 0.005);

		// }, onProgress, onError);
	</script>
</body>
